Headless WordPress: React Router Pagination

In the last tutorial we have loaded articles when clicking a pagination button. If you would like to load articles even from a page parameter from URL, we need to implement a route. We will use the React Router to paginate through pages.

If you have not yet completed the previous tutorial, you can check it out here: https://www.ibenic.com/headless-wordpress-loading-posts-pagination/.

To start with the React Router, we need to install it. Once you have positioned yourself in the folder we have created in the previous tutorial (through the command line), type this command:

npm install react-router-dom

Once installed, let’s start editing and adding code. First, we will import components from the React Router at the begging of our App.js file.

Adding Router to your App

We will now wrap our App JSX with Router so we can use Router components inside of our App. Be aware that once this code is added, you will get errors because of undefined components. We will define them next.

So, we have wrapped all our JSX with the Router components and using the Switch component so that Routes can be switched when the URLs are matched.

The first route that we have defined is /page/:page. This will load the ArticlePage component. We will then get the parameter page to load the correct articles.

The second route will be used to load any article. The component Article will be shown for any URL that has anything in the path. The path will be considered as the item slug.

The last route is the default URL (home url) that will load the first page. We have also removed the setCurrentPage being passed to the Articles component because we will use the routes now.

The Article Component

We will define the article in the next tutorial, so for now, we will just add a component to render that route. Add this code outside of the component App.

With the property currentPage we will be able to show the user the previous page.

In this component, the component Link is used to change the Route (URL) on click.

Showing the Articles for a Page

Now we need to define the function/component ArticlePage. Inside of that function we will call the setCurrentPage to set the current page so that the useEffect is triggered to load articles for the current page.

This function is defined inside of App so we can have access to setCurrentPage. Once the page is set, we render the Articles component.

In the previous tutorial, we passed the setCurrentPage to the Articles component. This was used to set the page once clicked on the pagination button. Since now we are using the React Router, we don’t need that anymore.

Refactoring the Articles component

We will now refactor the Articles component.

Now, when building the pagination, we are using the component Link instead of a button. We are setting the route inside of the parameter to.

Another thing to do is to link articles. We are using the same component on the article title. This will link to the items slug thus making the URL structure that will load the Article component.

Code Sample

If you don’t want to edit the code or maybe don’t have the whole code from the previous tutorial, you can download the complete code here.

Once downloaded, make sure to run the command npm install through the command line and set the URL to your blog or another WP powered site.

Conclusion

Using React Router, we can easily define URLs and what component to display. This can be used to create pages, posts and any other type of content with a few lines of code.

Have you ever used React Router? Were there any struggles with it? Let us know in the comments below.

Become a Sponsor